import React from 'react'

// 导入列表组件需要的样式表
// 直接导入的样式表全局生效
// React 中是否有类似Vue 的scoped 指令
// 没有，react中没有指令概念，
// 那如何做组件间样式隔离
// 启用css-loader模块化，注意观察前后cssobj不同
import cssObj from '@/css/hi.scss';
// 空白对象，启用模块化后，类名或id作为obj的key，值为实际编译后的类名
console.log(cssObj)
// class 关键字创建组件
class Hi extends React.Component{

  constructor() {
    // 由于继承了React.Component这个父类，所以自定义的构造器中，必须调用super()
    super()
    this.state = {
      msg: '我是class创建的组件'
    }
  }

  // render函数作用，是渲染当前组件的虚拟DOM
  // 在class创建组件中，如果想使用外界传递进来的props，不需要接收，直接通过this.props.***访问即可
  render() {
    return <div>
      {/* 注意， 在class 组件中，this表示当前组件的实例对象 */}
      {/* 在jsx 中，如果想写行内样式，不能为style设置字符串，得是一个js对象 */}
      {/* 行内样式中如果是数值类型的可以不用引号包裹 */}
      <h2 style={ {textAlign: 'Right' } }>Hi，{this.props.name}</h2>
      <h3 className={cssObj['text-right']}>{this.state.msg} </h3>
    </div>
  }
}

export default Hi
